<template>
 <div class="cart">
   <!-- 导航 -->
     <nav-bar>
         <div slot="center">购物车({{cartLength}})</div>
     </nav-bar>
     <!-- 商品列表 -->
     <cart-list></cart-list>
     <car-button-bar></car-button-bar>
 </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';

import CarButtonBar from './childComps/CarButtonBar'
import CartList from './childComps/CartList'
import {mapGetters} from 'vuex'
 export default {
  name:'Shopping',
  data () {
   return {
       cartNum:6
   };
  },
  computed: {
    // cartLength(){
    //   return this.$store.state.cartList.length
    // }
    //用vuex的getters取值
    ...mapGetters([
      'cartLength',
      'cartList'
    ])
  },
  components: {
      NavBar,
      CartList,
      CarButtonBar
  },


  created () {
    console.log("购物车");
  }
 }
</script>
<style scoped>
  .nav-bar{
    background: var(--color-tint);
    color:#fff;
    font-weight: 700;
  }
  .cart{
    height: 100vh; 
  }
</style>